import React, { Fragment, useState, useEffect, useRef } from "react";

import { Color } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// Obj
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";

import IndexBottomCom from '../../../components/tabbar/indexBottom';
import {
  IonContent,
  IonHeader,
  IonButton,
  IonPage,
  IonTitle,
  IonToolbar,
  IonList,
  IonLabel,
  IonListHeader,
  IonIcon
} from '@ionic/react';
import OBJ from "./obj";
const PetC4D = (props) => {
  useEffect(() => {
    // AddModel();
    OBJ.init();
    OBJ.animate();
    
  }, [])

  return (
    <IonPage>
      {/* 虚拟模型实验 */}
      {/*  */}
      <IonHeader>
        <IonToolbar>
          <IonTitle>
            {/*自定义样式*/}
              虚拟实验室
            </IonTitle>
        </IonToolbar>
      </IonHeader>


      {/* 底部导航 */}
      <IndexBottomCom activeIndex={1} parent={props} />
    </IonPage>
  )
};
export default PetC4D;